<template>
  <div class="device">
    <div class="tab_control_box" v-show="subPage == 0">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="人员台账" name="1">
          <StaffList @editStaff="showStaffInfoModel" @staffDetails="onStaffDetails" ref="staffListRef" />
        </el-tab-pane>
        <el-tab-pane label="角色/工种管理" name="2">
          <RoleList @modifRole="addRoleInfo" ref="RoleListRef" />
        </el-tab-pane>
      </el-tabs>

      <div class="button_box">
        <el-row>
          <el-button type="text" plain icon="el-icon-refresh" @click="onRefreshClick">刷新</el-button>
          <el-button
            type="text"
            plain
            icon="el-icon-circle-plus-outline"
            v-if="activeName == 1"
            @click="showStaffInfoModel"
          >添加人员</el-button>
          <el-button
            type="text"
            plain
            icon="el-icon-circle-plus-outline"
            v-if="activeName == 2"
            @click="addRoleInfo"
          >添加角色</el-button>
        </el-row>
      </div>
    </div>

    <AddStaffInfoModel v-if="subPage == 1" ref="addStaffRef" />
    <StaffDetailsModel v-if="subPage == 2" ref="staffDetailRef" />
    <AddRoleModel ref="AddRoleModelRef" @refresh="onRefreshClick" />
  </div>
</template>

<script>
import StaffList from "./staff/StaffList";
import RoleList from "./staff/RoleList";
import AddStaffInfoModel from "../models/AddStaffInfoModel";
import StaffDetailsModel from "../models/StaffDetailsModel";
import AddRoleModel from "../models/AddRoleModel";
import HttpInterface from "../../util/httpInterface";
import { mapActions } from "vuex";

export default {
  name: "Staff",
  components: {
    StaffList, RoleList, AddStaffInfoModel, StaffDetailsModel, AddRoleModel
  },
  data() {
    return {
      activeName: "1",
      subPage: 0
    };
  },

  created () {
    HttpInterface.getUserInfo(() => {
      this.getTendersInfo();
      this.getDutymanageList();
      this.getGroupList();
      this.getRoleList();
      this.getMaritalstatusList();
      this.getBloodtypeList();
      this.getEdutypeList();
      this.getPoliticsstatusList();
      this.resetPresentPage();
    })
  },

  methods: {
    ...mapActions(["getTendersInfo", "getDutymanageList", "getGroupList", "getRoleList", "getMaritalstatusList"]),
    ...mapActions(["getBloodtypeList", "getEdutypeList", "getPoliticsstatusList"]),

    handleClick() {
      this.onRefreshClick();
    },

    // 页面初始化
    resetPresentPage () {
      this.subPage = 0;
      this.onRefreshClick();
    },

    // 添加人员信息
    showStaffInfoModel (userId) {
      this.subPage = 1;
      if (typeof userId === 'number') {
        this.$nextTick(function () {
          this.$refs.addStaffRef.refresh(userId);
        });
      } else {
        this.$nextTick(function () {
          this.$refs.addStaffRef.refresh(0);
        });
      }
    },

    // 添加角色信息
    addRoleInfo (id) {
      if (typeof(id) == "number") {
        this.$refs.AddRoleModelRef.show(id);
      } else {
        this.$refs.AddRoleModelRef.show(0);
      }
    },

    // 跳转到人员详情
    onStaffDetails (row) {
      this.subPage = 2;
      this.$nextTick(() => {
        this.$refs.staffDetailRef.getStaffDetail(row.userId);
      });
    },

    // 刷新数据
    onRefreshClick () {
      switch (this.activeName) {
        case "1":
          this.$nextTick(() => {
            this.$refs.staffListRef.getDutyuserList();
          })
          break;
        case "2":
          this.$refs.RoleListRef.getRoleList();
          break;
      }
    }
  }
};
</script>
